<template>
  <div class="main">
    <Layout>
      <Header class="header">
        <Menu mode="horizontal" theme="dark">
          <div class="layout-tit">后台系统</div>
          <div class="layout-nav">
            <div class="user-dropdown">
              <Dropdown transfer trigger="hover" style="line-height: normal">
                <a href="javascript:void(0)">
                  <span class="main-user-name">{{userInfo.nick}}</span>
                  <Icon type="md-arrow-dropdown"></Icon>
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem name="ownSpace" @click.native="$router.push({name:'home_index'})">个人中心</DropdownItem>
                  <DropdownItem name="loginout" divided @click.native="logout">退出登录</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <Avatar :src="userInfo.head" style="background: #fff;margin-left: 10px;"></Avatar>
            </div>
          </div>
        </Menu>
      </Header>
      <Layout>
        <sider-menu @on-update-path="(arr)=>{this.curPaths=arr}" @on-cur-route-change="curRouteChange"/>
        <Layout class="single-page-layout">
          <Breadcrumb :style="{margin: '24px 0'}">
            <BreadcrumbItem v-for="item in curPaths" :href="item.path" :key="item.name">{{item.title}}</BreadcrumbItem>
          </Breadcrumb>
          <div class="single-page">
            <router-view></router-view>
          </div>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
  import SiderMenu from '../../components/main/sider-menu'
  import {mapState} from 'vuex';
  import {CLEAR_LOGIN_DATA} from "../../store/param/mutation_type";
  import Cookies from 'js-cookie'
  export default {
    name: 'Main',
    data() {
      return {
        curPaths: []
      }
    }, components: {SiderMenu},
    computed: {
      ...mapState(['userInfo'])
    },
    watch: {
    }, methods: {
      curRouteChange(route){

      },
      logout() {
        this.$Modal.confirm({
          title: '退出登录',
          content: '<p>您确定要退出登录吗？</p>',
          onOk: async () => {
            this.$store.commit(CLEAR_LOGIN_DATA)
            this.$router.push({name: 'login'})
          },
          onCancel: () => {

          }
        });
      }
    },async mounted() {
    }
  }
</script>

<style scoped lang="less">
  @import "./main";

  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }

</style>
